$(document).ready(function () {
    require.config({
        baseUrl: ctx + '/resource/plugins/echarts4',
        paths: {
            echarts: 'echarts',
            dark: 'theme/dark'
        }
    });
    require(
        [
            'echarts',
            'dark'
        ],
        function (ec) {

            left_top_echart1 = ec.init(document.getElementById('left_top_echart1')); //使用率
            left_top_echart2 = ec.init(document.getElementById('left_top_echart2'));
            left_top_echart3 = ec.init(document.getElementById('left_top_echart3'));
            left_top_echart4 = ec.init(document.getElementById('left_top_echart4'));
            left_top_echart5 = ec.init(document.getElementById('left_top_echart5'));
            left_up_echart();
            top_right_echart = ec.init(document.getElementById('top_right_echart'), 'dark');//资源使用情况
            resourceUseClass();
            center_echart = ec.init(document.getElementById('center_echart'), 'dark');//存储使用情况
            resourceStorageOverview();
            center1_echart = ec.init(document.getElementById('center1_echart'), 'dark');//cpu使用情况
            resourceCpuOverview();
            center_right_echart = ec.init(document.getElementById('center_right_echart'), 'dark');//内存使用情况
            resourceMemoryOverview();


            var beijing = ctx + "/resource/resource/resource/beijing.json";
            //机房分布视图
            $.get(beijing, function (bjJson) {
                ec.registerMap('beijing', bjJson);
                map_echart = ec.init(document.getElementById('map_echart'));//资源使用情况
                partialView();

            });


            setTimeout(function () {
                window.onresize = function () {
                    left_top_echart1.resize();
                    left_top_echart2.resize();
                    left_top_echart3.resize();
                    left_top_echart4.resize();
                    left_top_echart5.resize();
                    center_echart.resize();
                    center1_echart.resize();
                    center_right_echart.resize();
                    top_right_echart.resize();
                }
            }, 200)
        }
    );
    resourceOvervice();
    virtualResourceOvervice();
    machineRoomOverview();
    resource_room();
});


/**资源总览*/
function resourceOvervice() {
    url = ctx + "/ResourceReport/resourceOvervice";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var count = overview.count;
            var list = overview.list;
            $("#zy").html(count[0].TRANSIT);
            $("#sy").html(count[0].SURPLUS);
            $("#zs").html(count[0].TOTAL);
            var tableStr = "";
            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    tableStr += "<tr><td title='>" + list[i].RESOURCE_CLASSIFY + "'><span>" + list[i].RESOURCE_CLASSIFY + "</span></td>";
                    tableStr += "<td><span>" + list[i].TRANSIT + "</span></td>";
                    tableStr += "<td><span>" + list[i].SURPLUS + "</span></td>";
                    tableStr += "<td><span>" + list[i].TOTAL + "</span></td></tr>";
                }
            }

            $("#tb8").append(tableStr);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function left_up_echart() {
    var url = ctx + "/ResourceReport/resourceUsageRate";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var hardwareOverview = JSON.parse(data);
            option = {
                tooltip: {
                    formatter: "{b}:{c}%"
                },
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 坐标轴小标记
                            textStyle: {       // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#000000',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 15
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 3,
                                color: '#000000',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {           // 分隔线
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5
                        },
                        title: {
                            offsetCenter: [0, -25, '50%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 12,
                                color: '#000000',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail: {
                            offsetCenter: [0, 54, '50%'],
                            textStyle: {
                                fontSize: 20
                            },
                            formatter: '{value}%'
                        },

                        data: []
                    }
                ]
            };
            for (var i = 0; i < hardwareOverview.length; i++) {
                mydata = [{value: hardwareOverview[i].RESOURCE_USAGERATE, name: hardwareOverview[i].RESOURCE_CLASSIFY}];
                option.series[0].data = mydata;
                var num = i + 1;
                if (num == 1) {
                    left_top_echart1.setOption(option);
                } else if (num == 2) {
                    left_top_echart2.setOption(option);
                } else if (num == 3) {
                    left_top_echart3.setOption(option);
                } else if (num == 4) {
                    left_top_echart4.setOption(option);
                } else {
                    left_top_echart5.setOption(option);
                }
            }


        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function virtualResourceOvervice() {
    var url = ctx + "/ResourceReport/virtualResourceOvervice";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var count = overview.count;
            overview = overview.list;
            $("#rzy").html(count[0].RESOURCE_POOL_TRANSIT);
            $("#rsy").html(count[0].RESOURCE_POOL_SURPLUS);
            $("#rzs").html(count[0].RESOURCE_POOL_ALL);
            var tableStrs = "";
            if (overview.length > 0) {
                for (var i = 0; i < overview.length; i++) {
                    tableStrs += "<tr><td title='" + overview[i].VIRTUAL_RESOURCES + "'><span>" + overview[i].VIRTUAL_RESOURCES + "</span></td>";
                    tableStrs += "<td><span>" + overview[i].ALL_USED + "</span></td>";
                    tableStrs += "<td><span>" + overview[i].ALL_SURPLUS + "</span></td>";
                    tableStrs += "<td><span>" + overview[i].ALL_TOTAL + "</span></td></tr>";
                }
            }
            $("#tb3").append(tableStrs);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function resourceStorageOverview() {
    var url = ctx + "/ResourceReport/resourceStorageOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var xdata = [];
            var y1data = [];
            var y2data = [];
            var y3data = [];
            var y4data = [];
            for (var i = 0; i < overview.length; i++) {
                xdata.push(overview[i].DEVICES_NAME);
                y1data.push(overview[i].STORAGE_USED);
                y2data.push(overview[i].STORAGE_SURPLUS);
                y3data.push(overview[i].STORAGE_TOTAL);
                y4data.push(overview[i].USAGE_RATE);
            }
            option = {
                backgroundColor: '#fff',//背景色
                tooltip: {
                    axisPointer: {
                        type: 'shadow'
                    },
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].name + '<br/>'
                            + '在用数:' + params[0].value + 'G<br/>'
                            + '剩余数:' + params[1].value + 'G<br/>'
                            + '总数量:' + params[2].value + 'G<br/>'
                            + '使用率:' + parseFloat((params[3].value).toPrecision(12)) + '%';
                    }
                },
                // title: {
                //     text: '存储使用视图',
                //     x: 'center',
                //     textStyle: {
                //         color: '#000000'
                //     }
                // },
                toolbox: {
                    show: false,
                },
                grid: {
                    x: '20%',
                    y: '20%',
                    x2: '10%',
                    y2: '20%',
                    borderWidth: 0,
                },
                calculable: true,
                legend: {
                    data: ['在用数', '剩余数', '总数量', '使用率'],
                    // x: 'center',
                    // y: 'bottom',
                    textStyle: {
                        color: '#000000'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: -75,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        data: xdata
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true,
                        },
                        name: '在用/剩余(G)',
                        nameTextStyle: {
                            color: '#000000',
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    },

                    {
                        type: 'value',
                        splitLine: {
                            show: false,
                        },
                        name: '使用率(%)',
                        nameTextStyle: {
                            color: '#000000',
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '在用数',
                        color: '#00C5CD',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y1data
                    },
                    {
                        name: '剩余数',
                        color: '#C6E2FF',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y2data
                    },
                    {
                        name: '总数量',
                        color: '#458B74',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y3data
                    },
                    {
                        name: '使用率',
                        color: '#EE7600',
                        type: 'line',
                        yAxisIndex: 1,
                        data: y4data
                    }
                ]
            };
            center_echart.setOption(option);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function resourceCpuOverview() {
    var url = ctx + "/ResourceReport/resourceCpuOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var xdata = [];
            var y1data = [];
            var y2data = [];
            var y3data = [];
            var y4data = [];
            for (var i = 0; i < overview.length; i++) {
                xdata.push(overview[i].DEVICES_NAME);
                y1data.push(overview[i].CPU_USED);
                y2data.push(overview[i].CPU_SURPLUS);
                y3data.push(overview[i].CPU_TOTAL);
                y4data.push(overview[i].USAGE_RATE);
            }
            option = {
                backgroundColor: '#fff',//背景色
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>'
                            + '在用数:' + params[0].value + 'HZ<br/>'
                            + '剩余数:' + params[1].value + 'HZ<br/>'
                            + '总数量:' + params[2].value + 'HZ<br/>'
                            + '使用率:' + parseFloat((params[3].value).toPrecision(12)) + '%';
                    }
                },
                // title: {
                //     text: 'CPU使用概览',
                //     x: 'center',
                //     textStyle: {
                //         color: '#000000'
                //     }
                // },
                toolbox: {
                    show: false,
                },
                grid: {
                    x: '15%',
                    y: '20%',
                    x2: '10%',
                    y2: '20%',
                    borderWidth: 0,
                },
                calculable: true,
                legend: {
                    data: ['在用数', '剩余数', '总数量', '使用率'],
                    // x: 'center',
                    // y: 'bottom',
                    textStyle: {
                        color: '#000000'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: -75,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        data: xdata
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true,
                        },
                        name: '在用/剩余(HZ)',
                        nameTextStyle: {
                            color: '#000000',
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        name: '使用率(%)',
                        nameTextStyle: {
                            color: '#000000'
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '在用数',
                        color: '#00C5CD',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y1data
                    },
                    {
                        name: '剩余数',
                        color: '#C6E2FF',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y2data
                    },
                    {
                        name: '总数量',
                        color: '#458B74',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y3data
                    },
                    {
                        name: '使用率',
                        color: '#EE7600',
                        type: 'line',
                        yAxisIndex: 1,
                        data: y4data
                    }
                ]
            };
            center1_echart.setOption(option);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function resourceMemoryOverview() {
    var url = ctx + "/ResourceReport/resourceMemoryOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var xdata = [];
            var y1data = [];
            var y2data = [];
            var y3data = [];
            var y4data = [];
            for (var i = 0; i < overview.length; i++) {
                xdata.push(overview[i].DEVICES_NAME);
                y1data.push(overview[i].MEMORY_USED);
                y2data.push(overview[i].MEMORY_SURPLUS);
                y3data.push(overview[i].MEMORY_TOTAL);
                y4data.push(overview[i].USAGE_RATE);
            }
            option = {
                backgroundColor: '#fff',//背景色
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>'
                            + '在用数:' + params[0].value + 'G<br/>'
                            + '剩余数:' + params[1].value + 'G<br/>'
                            + '总数量:' + params[2].value + 'G<br/>'
                            + '使用率:' + parseFloat((params[3].value).toPrecision(12)) + '%';
                    }
                },
                // title: {
                //     text: '内存使用概览',
                //     x: 'center',
                //     textStyle: {
                //         color: '#000000'
                //     }
                // },
                toolbox: {
                    show: false,
                },
                grid: {
                    x: '20%',
                    y: '20%',
                    x2: '10%',
                    y2: '20%',
                    borderWidth: 0
                },
                calculable: true,
                legend: {
                    data: ['在用数', '剩余数', '总数量', '使用率'],
                    // x: 'center',
                    // y: 'bottom',
                    textStyle: {
                        color: '#000000'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: -75,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        data: xdata
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true
                        },
                        name: '在用/剩余(G)',
                        nameTextStyle: {
                            color: '#000000'
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        name: '使用率(%)',
                        nameTextStyle: {
                            color: '#000000'
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '在用数',
                        color: '#00C5CD',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y1data
                    },
                    {
                        name: '剩余数',
                        color: '#C6E2FF',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y2data
                    },
                    {
                        name: '总数量',
                        color: '#458B74',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        data: y3data
                    },
                    {
                        name: '使用率',
                        color: '#EE7600',
                        type: 'line',
                        yAxisIndex: 1,
                        data: y4data
                    }
                ]
            };
            center_right_echart.setOption(option);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function resourceUseClass() {
    var url = ctx + "/ResourceReport/resourceUseClass";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var xdata = [];
            var y1data = [];
            var y2data = [];
            var y3data = [];
            var y4data = [];
            for (var i = 0; i < overview.length; i++) {
                xdata.push(overview[i].RESOURCEUSE);
                y1data.push(overview[i].ZAIYUNNUM);
                y2data.push(overview[i].SHENGYUNUM);
                y3data.push(overview[i].ALLNUM);
                y4data.push(overview[i].P);
            }
            option = {
                backgroundColor: '#fff',//背景色
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>'
                            + '在用数:' + params[0].value + 'G<br/>'
                            + '剩余数:' + params[1].value + 'G<br/>'
                            + '总数量:' + params[2].value + 'G<br/>'
                            + '使用率:' + parseFloat((params[3].value).toPrecision(12)) + '%';
                    }
                },
                // title: {
                //     text: '资源分类使用情况',
                //     x: 'center',
                //     textStyle: {
                //         color: '#000000'
                //     }
                // },
                toolbox: {
                    show: false
                },
                grid: {
                    x: '10%',
                    y: '20%',
                    x2: '10%',
                    y2: '20%',
                    borderWidth: 0
                },
                calculable: true,
                legend: {
                    data: ['在用数', '剩余数', '总数量', '使用率'],
                    // x: 'center',
                    // y: 'bottom',
                    textStyle: {
                        color: '#000000'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: -45,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        data: xdata
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true
                        },
                        name: '在用/剩余(个)',
                        nameTextStyle: {
                            color: '#000000'
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    },

                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        name: '使用率(%)',
                        nameTextStyle: {
                            color: '#000000'
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '在用数',
                        type: 'bar',
                        stack: '总量',
                        color: '#00C5CD',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        // itemStyle: {
                        //     normal: {
                        //         color: '#000000',
                        //     }
                        // },
                        data: y1data
                    },
                    {
                        name: '剩余数',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        color: '#C6E2FF',
                        data: y2data
                    },
                    {
                        name: '总数量',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                position: 'insideRight'
                            }
                        },
                        color: '#458B74',
                        data: y3data
                    },
                    {
                        name: '使用率',
                        color: '#EE7600',
                        type: 'line',
                        yAxisIndex: 1,
                        data: y4data
                    }
                ]
            };
            top_right_echart.setOption(option);

        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function machineRoomOverview() {
    var url = ctx + "/ResourceReport/machineRoomOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            // console.log(overview);
            var tableStr2 = "";
            if (overview.length > 0) {
                for (var i = 0; i < overview.length; i++) {
                    tableStr2 += "<tr><td title='" + overview[i].PLACE_NAME + "'><span>" + overview[i].PLACE_NAME + "</span></td>";
                    tableStr2 += "<td><span>" + overview[i].START_TIME + "</span></td>";
                    tableStr2 += "<td><span>" + overview[i].AREA + "</span></td>";
                    tableStr2 += "<td><span>" + overview[i].ADDRESS + "</span></td></tr>";
                }

            }
            $("#tb2").append(tableStr2);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

/**
 * 资源机房视图
 */
function resource_room() {
    var url = ctx + "/ResourceReport/machineRoomResourceOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var computerRoom = JSON.parse(data);
            var divStr = "<div>";
            var len = computerRoom.length > 6 ? 6 : computerRoom.length;
            for (var i = 0; i < len; i++) {
                if (computerRoom[i].PLACE_NAME.length > 5) {
                    var PLACE_NAME = computerRoom[i].PLACE_NAME.substring(0, 5) + "...";
                } else {
                    PLACE_NAME = computerRoom[i].PLACE_NAME;
                }
                var a = parseInt(i + 1);
                if ((a + 2) % 3 == 0) {
                    divStr += "<div class='third circle' style='width: 29%;top: 10%;float: left;' id='circle" + a + "'><strong></strong>";
                    // divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 39%;width: 110px;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" + computerRoom[i].PLACE_NAME+ "</span></div>";
                    divStr += "<span  style='display:block;line-height: 36px;text-align: center;height:36px;color: #FFF !important;background-color:#269796;left: 5%;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='" + computerRoom[i].PLACE_NAME + "'>" + computerRoom[i].PLACE_NAME + "</span></div>";
                } else if ((a + 1) % 3 == 0) {
                    divStr += "<div class='third circle' style='width: 32%;top: 10%;float: left;' id='circle" + a + "'><strong></strong>";
                    // divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 39%;width: 110px;' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" + computerRoom[i].PLACE_NAME+ "</span></div>";
                    divStr += "<span style='display:block;line-height: 36px;text-align: center;height:36px;color: #FFF !important;background-color:#269796;left: 5%;'data-toggle='tooltip' data-placement='bottom' title='" + computerRoom[i].PLACE_NAME + "'>" + computerRoom[i].PLACE_NAME + "</span></div>";
                } else {
                    divStr += "<div class='third circle' style='width: 28%;top: 10%;float: left;' id='circle" + a + "'><strong></strong>";
                    // divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 39%;width: 110px;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" +computerRoom[i].PLACE_NAME + "</span></div>";
                    divStr += "<span style='display:block;line-height: 36px;text-align: center;height:36px;color: #FFF !important;background-color:#269796;left: 5%;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='" + computerRoom[i].PLACE_NAME + "'>" + computerRoom[i].PLACE_NAME + "</span></div>";
                }
                if (a % 3 == 0) {
                    if (a != len) {
                        divStr += "</div><hr>";
                    }
                    $("#computerRoom").append(divStr);
                    divStr = "<div>";
                } else if (a == len) {
                    divStr += "</div>";
                    $("#computerRoom").append(divStr);
                }
            }
            for (var i = 0; i < len; i++) {
                var percent = computerRoom[i].P;
                $("#circle" + (i + 1)).circleProgress({
                    value: percent,
                    size: 100,
                    thickness: 12,
                    lineCap: "round",
                    emptyFill: "#63B8FF",
                    fill: {
                        gradient: ["red", "#39a6f9"]
                    }
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $(this).find('strong').html(parseInt(100 * stepValue) + '<i>%</i>');
                });
            }
            $("[data-toggle='tooltip']").tooltip();
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

function partialView() {
    var url = ctx + "/ResourceReport/machineRoomMapOverview";
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            var overview = JSON.parse(data);
            var vdata = [];
            var ldata = [];
            for (var i = 0; i < overview.length; i++) {
                ldata.push(overview[i].MR_LONGITUDE);
                ldata.push(overview[i].MR_LATITUDE);
                ldata.push(overview[i].DEVICES_NAME);
                vdata.push({name: overview[i].DEVICES_NAME, value: ldata});
                ldata = [];
            }
            // console.log(vdata);
            option = {
                // title: {
                //     text: '机房分布视图',
                //     left: 'center',
                //     textStyle: {
                //         color: '#000000'
                //     }
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var name = params.name;
                        name = name.replaceAll(",", "<br/>");
                        return name;
                    }
                },
                //线颜色及飞行轨道颜色
                visualMap: {
                    show: false,
                    min: 0,
                    max: 100,
                    color: ['rgba(255, 235, 59, .7)']
                },
                //地图相关设置
                geo: {
                    map: 'beijing',
                    //视角缩放比例
                    zoom: 1,
                    //显示文本样式
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#000000'
                            }
                        }
                    },
                    //鼠标缩放和平移
                    roam: true,
                    itemStyle: {
                        normal: {
                            //          	color: '#ddd',
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: '#009fe8' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#009fe8' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: 'rgba(255, 235, 59, .7)',
                            borderWidth: 0
                        }
                    }
                },
                series: [{
                    name: '机房分布图',
                    type: 'lines',
                    map: 'beijing',
                    zlevel: 2
                },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        //波纹效果
                        rippleEffect: {
                            period: 2,
                            brushType: 'stroke',
                            scale: 3
                        },
                        label: {
                            normal: {
                                show: false,
                                color: '#fff',
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        //圆点大小
                        symbolSize: 20,
                        itemStyle: {
                            normal: {
                                show: true,
                                color: "#F7F709"
                            }
                        },
                        data: vdata

                    }
                ]
            };
            map_echart.setOption(option);

        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });

}

String.prototype.replaceAll = function (s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
};